<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
		function check_name() {
			// step1 获取ajax对象
			var xhr = getXhr();
			
			// step2  发送请求
			var uri = '/ajax01/check_name.do?' + Math.random() + '&name=' + $F('username');
			xhr.open('get', uri, true);
			// 注意：请求路径最好写绝对路径
			
			// var uri = 'check_username.do?username=' + $F('username');
			xhr.onreadystatechange = function() {
				//step4 通过匿名函数来编写事件处理函数
				if(xhr.readyState == 4 && xhr.status == 200) {
					var txt = xhr.responseText;
					$('info_message').innerHTML = txt;
				}
			};
			xhr.send(null);
			
			// step4 编写事件处理函数,问题：为什么绑定f1时会失败，利用匿名函数会成功
			// 三少初步判定：在f1中使用的是新的ajax对象，所以之前在check_name方法中通过ajax的操作都会失效
			function f1() {
				var xhr = getXhr();
				
			}
			
		}
	</script>
</head>
<body type="font-size:30px">
	<form action="#" method="get">	
		用户名：<input type="text" id="username" name="username" onblur="check_name();"/>
		<!--  
			onblur="check_name();" 失去焦点时调用check_name();
		-->
		<span id="info_message"></span>
		<br /><br />
		密&nbsp;&nbsp;&nbsp;码：<input type="password" id="password" name="password" />
		<br /><br />
		<input type="submit" value="注册">
		
	</form>
</body>
</html>